<template>
    <div class="box">
      <div class="rankingList-top">
        <div class="rankingList-top_item">
          <img src="../assets/icon2/cloud.png" class="rankingList-top_img" alt="">
        </div>
        <div class="rankingList-top_item rankingList-top_center">我的歌单</div>
        <div class="rankingList-top_item">
          <img src="../assets/icon/menu.png" class="rankingList-top_img2" alt="">
        </div>
      </div>

      <div class="main">
         <div class="main-nva" v-for="item in mytop">
              <div class="main-nva_left">
                <img :src="item.img" alt="">
              </div>
              <div class="main-nva_right">
                {{item.text}}
                <span class="number">{{item.number}}</span>
                <span class="xiayige">
                  <img :src="item.imgs" alt="">
                </span>
              </div>
         </div>
        <div class="create" @click="kai">
          <img :src="zz" alt="">
          <span>我创建的歌单（3）</span>
          <img src="../assets/Myconcern/myconcern_female.png" alt="">
        </div>
        <ul class="music_list" v-show="kk">
          <li v-for="(key,item) in getPlaylist" :key="item">
            <img :src="key.coverImgUrl" alt="">
            <div class="music_list-text">
              <span>{{key.name}}</span>
              <span>{{key.trackCount}}首</span>
            </div>
          </li>
        </ul>
      </div>

      <v-footer></v-footer>
    </div>
</template>

<script>
  import footer from "@/components/footer/"
  export default {
    name: "my",
    data(){
      return {
        kk: true,
        zz: require('../assets/img/open.png'),
        mytop: [
          { img:require('../assets/icon2/misicIcon02.png'),text:'本地音乐',imgs:require('../assets/icon2/next.png'),number:'1' },
          { img:require('../assets/icon2/precent.png'),text:'最近播放',imgs:require('../assets/icon2/next.png'),number:'1' },
          { img:require('../assets/icon2/myStation.png'),text:'我的电台',imgs:require('../assets/icon2/next.png'),number:'0' },
          { img:require('../assets/icon2/myCollection.png'),text:'我的收藏',imgs:require('../assets/icon2/next.png'),number:'0' },
          { img:require('../assets/icon2/moon.png'),text:'Sati 空间',imgs:require('../assets/icon2/next.png'),number:'4' }
        ],
        getPlaylist: [],
        id: this.$storage.get('user').account.id,
      }
    },
    components: {
      'v-footer': footer,
    },
    methods:{
      kai(){
          this.kk = !this.kk;
          if (this.kk){
            this.zz =  require('../assets/img/open.png');
          } else {
            this.zz = require('../assets/img/close.png');
          }

      }
    },
    created() {

      this.$http.get(`/api/user/playlist?uid=${this.id}`).then((res) => {
        console.log(res);
       this.getPlaylist = res.data.playlist;
      });
    },
  }

</script>

<style scoped>
   .box{
     width: 100vw;
     margin-bottom: 100px;
     background: #FBFCFD;
   }
   .rankingList-top{
     width: 100vw;
     height: 50px;
     background: #C64B3D;
     line-height: 50px;
     text-align: center;
     font-size: 16px;
     color: #fffdef;
     position: fixed;
     z-index: 10;

   }
   .rankingList-top_item{
     width: 33vw;
     height: 50px;
     float: left;
   }
   .rankingList-top_img{
     width: 25px;
     display: block;
     margin-top: 17px;
     margin-left: 15px;
   }
   .rankingList-top_img2{
     width: 18px;
     display: block;
     margin-top: 18px;
     margin-left: 90px;
   }
  .main{
    width: 100vw;
    position: absolute;
    top: 50px;

  }
  .main-nva{
    width: 100vw;
    height: 50px;
  }
  .main-nva_left{
    width: 50px;
    height: inherit;
    margin-left: 10px;
    float: left;
  }
   .main-nva_left img{
     width: 25px;
     display: block;
     margin-top: 15px;
     margin-left: 6px;
   }
   .main-nva_right{
     width: 315px;
     height: inherit;
     font-size: 16px;
     line-height: 50px;
     border-bottom: 1px solid #f3f3f3;
     float: right;
     position: relative;
   }
  .number{
    display: block;
    width: 30px;
    height: 20px;
    font-size: 13px;
    color: #B7B8B9;
    line-height: 18px;
    text-align: center;
    position: absolute;
    top: 15px;
    right: 18px;
  }
  .xiayige{
    display: block;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 17px;
    right:5px;
  }
   .xiayige img{
     width: 8px;
     display: block;
     margin-left: 2px;
   }


   .create{
     width: 100vw;
     height:30px;
     background: #efeff0;
     line-height: 90px;
     padding-top: 5px;
     box-sizing: border-box;
     position: relative;
   }
   .create>img:nth-child(1){
     display: block;
     width: 10px;
     height: 10px;
     vertical-align: middle;
     margin-left: 14px;
     margin-top: 4px;
   }
   .create>span{
     width: 200px;
     height: 30px;
     line-height: 30px;
     font-size: 12px;
     color: #5f5f60;
     display: inline-block;
     margin-left: 35px;
     position: absolute;
     top: 0;
   }
   .create>img:nth-child(3){
     display: block;
     width: 20px;
     position: absolute;
     right: 10px;
     top: 12px;
     vertical-align: middle;

   }
   .music_list{
     list-style: none;
     font-size: 0;
   }
   .music_list>li{
     display: inline-block;
     height: 60px;
     width: 100vw;
     margin-left: 8px;
     position: relative;
   }
   .music_list>li>img{
     width: 55px;
     height: 55px;
     border-radius: 10px;
     margin-top: 4px;
     float: left;
   }
   .music_list-text{
     width: 300px;
     height: 60px;
     border-bottom: 1px solid #f0f0f1;
     font-size: 0;
     display: inline-block;
     margin-left: 14px;

   }
   .music_list-text>span:nth-child(1){
     font-size: 16px;
     display: block;
     margin-top: 9px;
   }
   .music_list-text>span:nth-child(2){
     font-size: 12px;
     color: #7d7d7e;
     display: block;
     margin-top: 3px;
   }
   .cardiac>img{
     width: 20px;
     margin: 3px 10px 0 10px;
     vertical-align: middle;
   }
   .cardiac>span{
     font-size: 12px;
     color: #c2463a;
     vertical-align: middle;
   }
</style>
